<template>
  <div class="progress-outer">
    <div class="progress">
      <div
        class="progress-bar"
        :class="type && 'progress-bar' + type"
        role="progressbar"
        :aria-valuenow="value"
        :aria-valuemin="0"
        :aria-valuemax="max"
        :style="{width:(percent<100?percent:100)+'%'}"
      ></div>
    </div>
    <div class="progress-text">
      <span>已抢 {{num}} 件</span>
      <span>{{valueText}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    value: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      default: 100
    },
    type: {
      type: String,
      default: ""
    },
    num: {
      type: [String, Number],
      default: 0
    }
  },
  computed: {
    percent() {
      return parseInt((this.value * 100) / this.max, 10);
    },
    valueText() {
      return this.percent + "%";
    }
  }
};
</script>
<style scoped>
.progress-outer {
  width: 80%;
  position: relative;
}
.progress {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
  border-radius: 10px;
  background: #ff454e47;
}
.progress .progress-bar {
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  transition: width 0.6s ease;
  background: #ff454e;
  border-radius: 10px;
}
.progress-text {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
</style>
